<template>
  <div class="events">
    <div v-for="(item_, index) in item.comps" :key="index">
      <component
        v-if="item_.name == 'DropdownNormal'"
        :is="item_.name"
        :label="item_.lable"
        v-model="item_.attrs.value"
        :valLists="getLists(index)"
        @change="onUpdatePageEvent"
      ></component>
      <component
        v-else
        :is="item_.name"
        :label="item_.lable"
        :placeholder="getToast(item.type, index)"
        v-model="item_.attrs.value"
        @change="onUpdatePageEvent"
      ></component>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState } from 'vuex'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

import { EVENT_HOVER_TYPES, FRONT_EVENT_TYPES, STATISTIC_DATA_TYPES } from '@/common/events'
import { OPEN_PUSH_TYPES } from '@/common/const'
import { TOAST } from '@/common/const-wb'

export default {
  props: ["item", "index"],
  components: {
    DropdownNormal,
    InputNormal,
    TextareaNormal,
    SwitchNormal,
  },
  computed: {
    ...mapGetters("components", {
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    ...mapState({
      selectEvent: (state) => state.selectEvent,
    }),
  },
  methods: {
    ...mapActions({
      updatePageEvent: "components/updatePageEvent"
    }),
    getLists(index) {
      let list = [];
      let type = this.item.type;
      if (type == EVENT_HOVER_TYPES.showOrHide.type) {
        list.push(
          { name: "显示", value: 1 },
          { name: "隐藏", value: 0 }
        );
      } else if (type == EVENT_HOVER_TYPES.layer.type) {
        this.pushPops(list);
      } else if (type == EVENT_HOVER_TYPES.anchor.type) {
        this.pushPages(list);
      } else if (type == EVENT_HOVER_TYPES.number.type) {
        this.pushPops(list);
      } else if(type == EVENT_HOVER_TYPES.rotate3d.type || type == EVENT_HOVER_TYPES.shake.type){
        if(index == 0){
          this.pushPops(list);
        }else{
          this.pushPages(list);
        }
      } else if(type == EVENT_HOVER_TYPES.openPush.type){
        list = OPEN_PUSH_TYPES
      }else if(type == EVENT_HOVER_TYPES.checkWeibo.type) {
        this.pushPops(list);
      }else if(type == EVENT_HOVER_TYPES.frontEvents.type) {
        list = FRONT_EVENT_TYPES;
      } else if(type == EVENT_HOVER_TYPES.statisticData.type){
        list = STATISTIC_DATA_TYPES;
      }
      return list;
    },
    getToast(eventType, index){
      let str = TOAST[eventType] && TOAST[eventType][index]
      return str ? JSON.stringify(str) : '预留属性，可以不用填写'
    },
    onUpdatePageEvent() {
      let type = this.item.type;
      this.updatePageEvent({type, event:this.item});
    },
    pushPages(list){
      let len = this.pages.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "页面-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    pushPops(list){
      let len = this.pops.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "弹层-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    }
  }
};
</script>
